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1. Usabilidad 


Una cosa es usable cuando es considerada útil y servible en todos los aspectos. 
De hecho eso pasa a menudo, ya que los visitantes de una web son los que fi- 
nalmente decidirán quedarse en la página o seguir navegando hasta conseguir 
la información tan preciada que buscan. Dentro de estas dos posibilidades, la 
que prevé y estudia la usabilidad, naturalmente, es la de los usuarios que se 
quedan en la web, las razones por las que éstos lo hacen y qué es lo que más 


les interesa. 


1.1. Pautas de usabilidad 


A continuación, veremos una serie de pautas que nos ayudarán a hacer que 


nuestra web sea usable. 


+ Un menú coherente: el menú de la página web tiene que ser fácil de in- 
terpretar. Es recomendable no variar mucho los colores y diferenciar entre 
el apartado donde estamos y el apartado al cual queremos acceder. Ade- 
más, este menú nos tiene que permitir ir a las páginas más importantes 


de la web. 


e Títulos claros y diferentes: un título ambiguo o con carencia de signifi- 
cado no nos dice nada sobre lo que estamos leyendo. El título de la pagi- 
na tiene que ser significativo para que también los buscadores lo indexen 


mejor. 


e Páginas con buena organización: las páginas tienen que ordenarse de 
manera clara y sencilla, si queremos que la gente se fije en lo que nosotros 
facilitamos; no los tenemos que estresar con más de una columna aparte 


del contenido. 


e Páginas sin exceso de información: sin duda, ofrecer mucha información 
y la más interesante posible es atrayente para el usuario, pero tenemos 
que saber facilitarla de una forma sencilla, intentando resumirla. Es mejor 


mostrar dos páginas bien claras que una interminable. 


e Enlace permanente a la página principal: un error frecuente es la falta de 
un enlace permanente a la página principal de la web. Este enlace permite 
a un usuario entrar en nuestra web por cualquier otra página que no sea 


la inicial e ir a ella mediante un solo clic. 


e Correo de contacto: un correo de contacto es imprescindible por si cual- 


quier visitante quiere hacer alguna sugerencia, proponer un tema o solu- 
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cionar una duda. Éste también tiene que ser visible y e identificable rápi- 


damente. 


1.2. La interacción persona-ordenador 


La interacción persona-ordenador es la disciplina relacionada con el diseño, 
la evaluación y la implementación de sistemas informáticos interactivos para 
el uso de seres humanos, y con el estudio de los fenómenos más importantes 


con la cual está relacionado. 


Obviamente, cuando creemos páginas web, lo haremos pensado que seremos 
visitados por usuarios. Entender, pues, la relación persona-ordenador es muy 


importante para dar al usuario una experiencia gratificante. 


Hemos de ver al usuario como una persona que aprende de la experiencia y que 
va evolucionando. Pensemos que hace pocas décadas nadie tenía ordenador 
en casa, y ahora todo el mundo (o casi todo el mundo) tiene o lo ha utilizado 


alguna vez. 


Hay aspectos que ayudarán a hacer que el usuario entienda el funcio- 
namiento de nuestra web basados en esta relación persona-ordenador 


alo largo del tiempo: 


e En primer lugar, los elementos importantes conviene que estén si- 
tuados arriba y a la izquierda, ya que éste es el primer lugar donde 
el usuario fija la mirada. Si vemos cualquier web corporativa, podre- 
mos ver que el logotipo se sitúa en esta zona. También los menús se 
sitúan en la parte de arriba o izquierda de la web: tenemos que pen- 
sar que es uno de los elementos más importantes de nuestra web y 
necesita ser de acceso fácil y rápido. Esto es porque nosotros leemos 
siempre de izquierda a derecha y de arriba abajo; por lo tanto, el 
punto de arriba a la izquierda es el primero que veremos intuitiva- 
mente. Si la web que queremos hacer tiene otros públicos con otras 
costumbres y escrituras, probablemente este hecho sería diferente. 


e Otro aspecto a tener en cuenta son los enlaces. Los enlaces consti- 
tuyen la interacción principal del usuario con la página web. Han 
de ser, pues, fácilmente reconocidos y entendidos por el usuario co- 
mo tal. La manera más clara para definir un enlace, y que el usuario 
asocia casi instintivamente, es subrayando una palabra en azul. La 
experiencia le dice que una palabra subrayada y de color azul equi- 
vale a enlace y hacer, pues, esta asociación, no le costará ningún 
esfuerzo. Eso es así porque desde el inicio de la web, los enlaces, 
por defecto, han sido subrayados y en azul. De hecho, actualmente 
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algunas de las páginas más visitadas, como Google o Ebay, todavía 


utilizan el mismo sistema. 


e Otro punto clave es el tiempo que el usuario se pasa visitando una 
página web. Tenemos que tener en cuenta que, según cifras estadís- 
ticas, el usuario navega por término medio menos de un minuto en 
cada web. Eso quiere decir que tenemos que atraer su atención de 
forma directa y evitar largos párrafos de texto que, al fin, no leerá. 


1.3. ¿Se entiende?, ¿Es comprensible?, ¿Me atrae?, ¿Sé dónde 
estoy? 


Aquí explicaremos algunas nociones básicas del diseño web. Diseño entendido 


como la vía o conducto para responder a las preguntas del enunciado "¿Se 


entiende?", "¿Me atrae?", "¿Sé dónde estoy?"... 
¿ ¿ y: 


El diseño web, pues, se tiene que entender como un todo que no sólo 
se compone de los elementos gráficos y colores de cada página, sino 
también de la misma organización en una pantalla, y más importante 
todavía, la estructura de las pantallas de las páginas web, y la facilidad 
del usuario para acceder allí donde quiere ir. 


Existen muchos puntos a tener en cuenta en el diseño web; los que merecen 


una especial atención son tres aspectos prioritarios. 


1) La imagen gráfica: lo más importante es que el diseño web guste al usuario, 
que las páginas web sean atractivas, gustables, que no cansen la vista, que los 
colores no se confundan con facilidad (especialmente pensando en personas 
con deficiencias visuales), y también que los espacios más interesantes de cada 


una de las pantallas de la página web destaquen frente al resto de contenidos. 


Así se consigue facilitar la consulta al usuario y ahorrar tiempo. 


2) La distribución de los contenidos en las pantallas: la página tiene que 
mantener un orden lógico, y siempre que sea posible, mantener una misma 
estructura y ubicación de los menús y contenidos. También resulta útil que los 
usuarios puedan consultar la ruta de pantallas desde la pantalla inicial hasta 
la actual (por ejemplo: inicio -> empresa —> situación), de manera que sepan 
cómo han llegado, y poder volver. Es muy importante que en todo momento 


sepan dónde están, cómo han llegado y cómo pueden volver atrás. 


3) La estructura de los apartados: es otro elemento importante del diseño 
web, ya que hace falta que sea el máximo de intuitiva para los usuarios, y 


tiene que garantizar la facilidad para llegar a todos y cada una de las pantallas 
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de la página web; este elemento es fundamental, no sólo para los usuarios, 
sino también para conseguir que la página web tenga visitas referidas desde 


buscadores. 
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2. Accesibilidad 


The power of the Web is in its universality. Access by everyone regardless of disability 
is an essential aspect. 


Tim Berners-Lee, W3C Director and inventor of the World Wide Web. 


Esta frase de Tim Berners-Lee refleja, por una parte, el gran poder universali- 
zador de Internet, y al mismo tiempo la gran responsabilidad que conlleva. 
Las webs, y finalmente la información, tienen que llegar a todas las partes del 
mundo, pero se tiene que hacer de manera que todo el mundo las pueda en- 
tender. Un discapacitado ha de tener las mismas oportunidades de acceder a 
la información de un sitio web que una persona que no tiene sus carencias. 
De la misma forma que una persona que escriba con hebreo tiene que poder 


publicar su información. 


2.1. WAI 


WAI son las siglas de Web Accessibility Initiative, es decir, la iniciativa 
para la accesibilidad web. Es una rama del World Wide Web Consortium 
que vela por la accesibilidad web. 


El desarrollo de un espacio web accesible implica la optimización tanto del 
contenido como del código, para facilitar el acceso al contenido de la web a 
personas con discapacidades, así como diferentes entornos incluyendo soft- 
ware y hardware (por ejemplo, navegadores de ordenadores, navegadores por 
voz, navegadores de texto, teléfonos móviles, ordenadores personales portáti- 


les o PDA, conexiones a Internet, etc.). 


La accesibilidad se entiende, por lo tanto, como el acceso universal a la infor- 
mación por la cual es contenida en los documentos web sin ninguna limita- 


ción por razones de deficiencia, minusvalidez o tecnología. 


Ejemplo 
Es decir, sin que interfieran, por ejemplo: 


e Problemas de oído, visión o movilidad. 

e Dificultades de lectura o comprensión cognitiva. 

e Imposibilidad de utilizar el teclado o el ratón. 

e Un lector únicamente de texto, una pantalla pequeña o una conexión lenta. 


La accesibilidad, por lo tanto, mejora el acceso a la web en general, y, al con- 
trario de lo que se puede pensar, no es de interés únicamente para personas 


con discapacidad. 
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2.2. Directrices de accesibilidad 


Las directrices de accesibilidad de contenido de una web, como referencia del 
W3C, presentan unos principios de accesibilidad e ideas de diseño. Están or- 


ganizados en catorceprincipios que veremos a continuación: 


1) Proporcionad alternativas equivalentes al contenido visual y auditivo: 


Proporcionad un contenido que, presentado al usuario, cumpla esencialmente 


la misma función que el contenido visual o auditivo. 


Ejemplo 
Por ejemplo, utilizando el atributo "alto" para dar información complementaria a una 
imagen. 


2) No os baséis solamente en el color: 


Aseguraos de que los textos y gráficos son comprensibles cuando se vean sin 


color. 


Ejemplo 
Por ejemplo, mediante el contexto o por etiquetas de marcaje o asegurándonos de que 


las combinaciones de los colores de fondo y primer plano tengan bastante contraste. 


3) Utilizad etiquetas de marcaje y hojas de estilo y hacedlo de manera 
adecuada: 


Marcad los documentos con los elementos estructurales adecuados. Controlad 
la presentación con hojas de estilo en vez de hacerlo con elementos y atributos 
de presentación. Es decir, como hemos estado viendo durante todo el temario, 


hay que tener separado el contenido de la manera como se muestra. 


4) Identificad el lenguaje natural usado: 


Utilizad etiquetas de marcaje que faciliten la pronunciación o interpretación 


de texto abreviado o extranjero. 


Ejemplo 


Por ejemplo, en HTML utilizad el atributo "lang". En XML utilizad "xml:lang". 


5) Cread tablas que se transformen correctamente: 


Aseguraos de que las tablas tienen el marcaje necesario para facilitar la con- 
versión para navegadores accesibles y otros agentes de usuario. Tenemos que 


evitar usarlas para la maquetación de páginas. 
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6) Aseguraos de que las páginas que incorporan nuevas tecnologías se 


transforman correctamente: 


Es decir, que las páginas sean accesibles incluso cuando no permiten la utili- 


zación de las tecnologías más modernas o éstas estén inactivas. 


7) Aseguraos de que el usuario pueda controlar los cambios de los conte- 


nidos con secuencia temporal: 


Aseguraos de que los objetos o las páginas que se mueven, parpadean, se des- 
plazan o se actualizan automáticamente puedan estar desempleados momen- 


táneamente o definitivamente por el usuario. 


8) Proporcionad la accesibilidad directa de las interfaces de usuario in- 


crustadas: 


Aseguraros de que la interfaz de usuario sigue los principios de un diseño ac- 
cesible: acceso a las funcionalidades con independencia del dispositivo, ope- 
ratividad del teclado, voz automática, etc. 


9) Diseñad teniendo en cuenta la independencia del dispositivo: 


Utilizad características que permitan la activación de los elementos de la pá- 
gina mediante diferentes dispositivos de entrada. 


Ejemplo 
Si, por ejemplo, un control de formulario sólo puede ser activado con un ratón u otro 


dispositivo, alguien que utilice la página sin verla, con entrada de voz o con un teclado, 
no podrá utilizar el formulario. 


10) Utilizad soluciones provisionales: 


Utilizad soluciones provisionales de accesibilidad para que las ayudas técnicas 


y los navegadores antiguos operen correctamente. 


Ejemplo 


Por ejemplo, cambiar la ventana actual o hacer aparecer nuevas ventanas puede ser muy 
desorientador para los usuarios que no ven lo que está pasando. 


11) Utilizad las tecnologías y directrices W3C: 


Utilizad las tecnologías W3C (de acuerdo con las especificaciones) y seguid las 
directrices de accesibilidad. Allí donde no sea posible utilizar la tecnología del 
W3C, o si al utilizarla se obtienen como resultado materiales de difícil conver- 


sión, proporcionad una versión alternativa del contenido que sea accesible. 


12) Proporcionad información de contexto y orientación: 


O FUOC e P08/93133/01509 12 


Buenas prácticas 





Proporcionad información de contexto y orientación para ayudar a los usua- 


rios a entender páginas o elementos complejos. 


13) Proporcionad mecanismos claros de navegación: 


Proporcionad mecanismos claros y consistentes de navegación (información 
de orientación, barras de navegación, mapa de la web, etc.) para incrementar 
la probabilidad de que una persona encuentre lo que está buscando en un sitio 
web. 


Ejemplo 


Por ejemplo, identificando claramente el objetivo de cada enlace, 


14) Aseguraos de que los documentos sean claros y simples: 


La maquetación consistente en páginas, gráficos reconocibles y un lenguaje 
fácil y entendedor beneficia a todos los usuarios. De manera particular, ayuda 
a las personas con discapacidades cognitivas o las que tienen dificultades en 
la lectura. 


2.3. Niveles de adecuación 


Cada una de las 14 directrices de accesibilidad de contenido de una web tiene 


puntos de verificación. 


Ejemplo 


Por ejemplo, en la directriz 1 un punto de verificación consistirá en comprobar que todas 
las imágenes tengan el atributo "alto". 


Cada punto de verificación tiene un nivel de prioridad basándose en el im- 


pacto que el punto tiene en la accesibilidad del documento. 


Prioridad 1: un creador de contenido web tiene que satisfacer este punto. De 
lo contrario, a uno o más grupos de usuarios les será imposible acceder a la 
información del documento. Satisfacer este punto es un requerimiento básico 


para que ciertos grupos puedan acceder al contenido de la web. 


Prioridad 2: un creador de contenido web tendría que satisfacer este punto. 
De lo contrario, a uno o más grupos de usuarios les será muy difícil acceder a la 
información del documento. Satisfacer este punto salvará importantes barreras 


para acceder al contenido de la web. 


Prioridad 3: un creador de contenido web puede satisfacer este punto. De lo 
contrario, a uno o más grupos de usuarios les puede ser difícil acceder a la 
información del documento. Satisfacer este punto mejorará el acceso al con- 


tenido de la web. 
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Algunos puntos especifican un nivel de prioridad diferente dependiendo de 


algunas condiciones, que se indican en el punto. 


Así pues, los niveles de adecuación serán los siguientes: 


e Nivel "A": se satisfacen todos los puntos de verificación 1. 
e Nivel "AA": se satisfacen todos los puntos de verificación 1 y 2. 
e Nivel "AAA": se satisfacen todos los puntos de verificación 1, 2 y 3. 


Trataremos, pues, de cumplir el nivel "AAA" de adecuación en la crea- 


ción de nuestras webs. 
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3. Indexación en buscadores (SEO) 


SEO es la abreviación de search engine optimizer, es decir, optimizador 
de motores de búsqueda. Lo que haremos será dar una serie de pautas a 
seguir para hacer que nuestra web sea más valorada por los principales 
buscadores web (Google, Yahoo, etc.). 


Diferentes factores pueden influir en la posición de una web en el resultado 
de las buscas. Veamos las más destacadas: 


Densidad de las palabras clave (keywords):la densidad de keywords en 
las páginas web es la frecuencia con la cual se mide la aparición de una 
o más palabras en el texto, expresado en porcentaje. Una densidad alta 
para las palabras clave que deseamos hará que aparezcamos antes en los 
buscadores cuando un usuario busque esa palabra. Aqui vemos la impor- 
tancia de separar el contenido de la manera en que se muestra porque, de 
esta manera, la densidad de las palabras clave dentro del contenido será 


más grande. 


Formato del texto: los buscadores dan más importancia al texto que esté 


remarcado con un formato determinado. 


Ejemplo 


Así, por ejemplo los encabezamientos tienen más importancia que los párrafos; por lo 
tanto, incluir una palabra clave en un encabezamiento resulta más efectivo. 


El título: es una de las etiquetas más importantes para los buscadores. El 
título tendrá que ser informativo y descriptivo del contenido del docu- 


mento. 


Atributo "alto" en las imágenes: los buscadores tienen en cuenta este 
atributo; por lo tanto, no lo tenemos que olvidar nunca cuando metemos 


una imagen en nuestro documento. 


Importancia de los enlaces de otras webs (crosslinking): una manera de 
dar más importancia a nuestra web, por parte de los buscadores, consis- 
te en el hecho de que éste esté enlazado desde otras páginas. Estas pági- 
nas que nos enlazan tienen que tener un cierto valor para los buscadores: 
cuanto más valoradas más importante será su enlace a nuestra web y, por 


lo tanto, mejores serán nuestros resultados. 
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Siguiendo estos consejos, conseguiremos dar una importancia mayor 
a nuestra web para los buscadores y, de esta manera, tendremos más 
presencia en Internet. Podemos tener la mejor web del mundo, pero si 


la gente no la encuentra en los buscadores es como si no existiéramos. 
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4. Otras buenas prácticas 


4.1. Estructura de archivos 


Una buena estructuración de nuestros archivos en carpetas es esencial a la 
hora de desarrollar una web. El nombre de las carpetas tiene que ser breve 
y descriptivo. El orden no sólo tendría que ser una cosa personal, ya que si 
alguien posteriormente quiere modificar o editar la web, y la estructura es 
entendedora, le será todo mucho más fácil. 


Aquí tenemos un buen ejemplo: 


Directorio de carpetas de entorno web basado en XML 


Mir. = | -| Fecha... | -| 
N asp 

de ess 

Le errors 

Je imgs 

de js 

dé swf 

di xml 

JO favicon.ico 
index. asp 
 index_fla.asp 

| Jindex_flash.htm 


Como vemos en la imagen, tenemos una carpeta "imgs" donde estarán todas las imáge- 
nes, una carpeta "css" donde habrá todos los archivos de hojas de estilo, etc. De esta ma- 
nera, encontrar un archivo nos será muy rápido y seremos más eficientes a la hora de 
desarrollar páginas web. 


4.2. Optimización de imágenes por web 


Generalmente, los ficheros de imágenes necesitan almacenar mucha informa- 
ción gráfica, lo cual hace que su peso final en bytes sea excesivo, tanto para 
imprimirlas (si la imagen es muy grande puede durar mucho el proceso de 


impresión) como para transferirlas por Internet. 
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Por eso, en el uso de imágenes para la web necesitamos: 
1) Reducir el número de colores utilizados en la imagen. 


2) Comprimir los datos de la imagen al máximo para que ocupen menos 


espacio. 


Los formatos corrientes de imagen que manejan los navegadores son básica- 
mente tres: GIF, JPG y PNG. 


¿Qué formato de gráfico conviene usar? 


Hay una regla general que conviene recordar: los formatos GIF y PNG son 
recomendables para gráficos simples y con colores planos; el formato JPG, en 
cambio, es perfecto para fotografías o imágenes con transiciones suaves de 


colores. 


Los formatos GIF y PNG están, pues, especialmente indicados en imá- 
genes con menos de 256 colores, en las cuales muchos puntos consecu- 
tivos tengan el mismo color, se repitan secuencias de colores o conten- 


gan principalmente textos. 


JPEG es un formato especialmente adecuado para imágenes con mu- 
chos colores y con gradaciones de tonos, como las fotografías o las di- 
gitalizaciones de alta calidad. 


Se hace también necesario controlar el número de imágenes incluidas en cada 
página y la realización de un proceso de optimización de los ficheros gräfi- 
cos en el cual, además de escoger el formato de almacenaje más adecuado, se 


busque la relación calidad/peso más acertada. 


Ejemplo 


Una imagen de 100 Kb teóricamente tardará en cargarse un segundo con una conexión 
ADSL de 1 MB por segundo, tiempo no muy elevado, pero si una página web contiene 
varias de estas imágenes, el resultado final será muy elevado. 


La mayoría de los programas gráficos de calidad ofrece una herramienta para 


optimizar el peso de un fichero gráfico destinado a la web. 


Una otra buena opción es la de utilizar thumbnails o imágenes muy pequeñas 
en la primera carga, y que cuando hagamos clic encima se abra la imagen de 
detalle. De esta manera, nos ahorraremos tener que cargar todas las imágenes 
grandes de entrada. Sólo se descargarían las imágenes que el usuario deseara 


ver con detalle. 
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4.3. Diferentes navegadores 


En la actualidad, hay numerosos navegadores web: Internet Explorer (1E), Fi- 
refox, Opera, Safari, Netscape... El más popular, entre los usuarios de platafor- 
ma Windows, es el IE, mientras que para los usuarios de Mac, el predilecto es 


el Safari. 


Con todo, tenemos que decir que no todos los navegadores interpretan de la 
misma manera el código de una página web. Los estándares web definen cómo 
se tiene que mostrar el código de una web con independencia del navegador. 
Pues bien, no todos los navegadores siguen estos estándares. Precisamente, el 
IE es uno de los navegadores que menos les sigue y, a la hora de visualizar una 
web nos podemos encontrar que en un navegador se ve de una determinada 
manera y, en cambio, en otro navegador se ve completamente diferente. Te- 
niendo en cuenta que cerca del 90% de nuestra audiencia visualizará la web 


con el IE, tenemos que considerar sus particularidades. 


Así pues, a la hora de programar nuestras webs, lo haremos siempre siguiendo 
los estándares. Hacer que una web se visualice de la misma manera en todos los 
navegadores es una tarea prácticamente imposible. No obstante, hay ciertas 


técnicas que nos ayudarán a ello. 


Por ejemplo, podemos especificar que una parte de nuestro código sea inter- 
pretado sólo para IE. Así, si tenemos el siguiente código: 


body { 
margin-left:10px; 
} 

<!--[if IE 

body { 
margin-left:20px; 
} 


endif]--> 


Vemos que estamos dando la propiedad "margin-left" dos veces al selector 





"body", pero el segundo aparece dentro de las etiquetas <!--[if IE]>y 
<! [endif] -->. Estas etiquetas indican que este código sólo será interpretado 
para el IE. 


De esta manera, podremos hacer las correcciones para el IE con respecto a 
la maquetación hacia los otros navegadores que respeten los estándares. Así 
pues, en el código anterior tendremos un margen izquierdo del body de 10 
píxeles para todos los navegadores, mientras que para IE este mismo margen 


izquierdo será de 20 píxeles. 
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La técnica del ejemplo anterior es extensamente utilizada, aunque hay otras Vínculo de interés 

que resuelven diferentes problemáticas de visualización, según el navegador. 
En esta web, encontraréis 
ejemplos de los bugs propios 





Actividad. Análisis de buenas prácticas en webs en línea de cada navegador y solucio- 
nes particulares sobradamen- 
La actividad que se propone para poner en práctica los conocimientos adquiridos en este te comentadas: 
módulo consiste en seleccionar tres webs en línea (las tres que queramos) y analizar el http://www.positioniseverything.net/ 


uso que hacen de las buenas prácticas que hemos visto. 

Los puntos que tendremos en cuenta serán: 

Usabilidad: 

e ¿Te gusta? Di por qué. 

e ¿La encuentras lo bastante atractiva para estar un rato viendo su contenido? 
e ¿La encuentras fácil de navegar? ¿Es intuitiva? 

e ¿Crees que tarda mucho en cargar los contenidos? 


Accesibilidad: 
e ¿Cumple los requisitos de accesibilidad que hemos visto? 
e ¿Pasa con éxito el validador web? 


Una vez analizadas las tres webs, veremos cuál hace el mejor uso de las buenas prácticas 
y cuál es la que peor respeta estas buenas prácticas. El objetivo es reflexionar sobre las 
ventajas de una web por el hecho de que sea usable y accesible. 


